<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            width:100%;
            height:64px;
            background: black;
        }
        .top .menu{
            width:1200px;
            height:100%;
            background: #6fa026;
            margin:0 auto;
        }
        .middle{
            width:100%;
            height:800px;
            background: antiquewhite;
        }
        .middle .content{
            width:1200px;
            height:100%;
            background: #9090fb;
            margin: 0 auto;
        }
        .bottom1{
            width:100%;
            height:120px;
            background: #212121;
        }
        .bottom1 .bot1-con{
            width:1200px;
            height:100%;
            background: #54b9e2;
            margin:0 auto;
        }
        .bottom2{
            width:100%;
            height:60px;
            background: #0e0e0e;
        }
        .bottom2 .bot2-con{
            width:1200px;
            height:100%;
            background: peru;
            margin: 0 auto;
        }
        div{}
        .top{}
        #test{} /*id选择器，id名必须是唯一的*/
    </style>
</head>
<body>
    <div class="top" id="test">
        <div class="menu top"></div>
    </div>
    <div class="middle">
        <div class="content"></div>
    </div>
    <div class="bottom1">
        <div class="bot1-con"></div>
    </div>
    <div class="bottom2">
        <div class="bot2-con"></div>
    </div>
</body>
</html>